<template>
	<view class="contaner">
		<view class="content">
			<view class="item">
				<view v-html="parame.content">

				</view>
				<view class="item-bottom">
					<image :src="imagUrl" show-menu-by-longpress mode="" @click="setPopup"></image>
					<van-popup :show="show" @close="onClose">
						<image :src="imagUrl" show-menu-by-longpress mode="" style="width: 100vw;height: 70vh;"></image>
					</van-popup>
					<view>长按识别二维码，扫码进群</view>
				</view>
			</view>
			<view class="item" style="height: 140rpx; line-height: 70rpx;">
				<text class="first-text">报名进度：</text>
				<text class="two-text">医生：{{parame.countDoctor}} / {{parame.minDoctor}}</text>
				<text>总人数：{{parame.countApply}} / {{parame.maxApply}}</text>
				<view class="appraising" v-if="isShow">
					已报满
				</view>
			</view>
			<text class="alList">案例列表</text>
			<view class="item1" v-for="item in alist" :key="item.id" @click="getAl(item)">
				<view class="item-h">
				   {{item.diseaseName}}
				</view>
				<view class="item-t">
					{{item.address}}
				</view>
				<view class="rightR">
					<van-icon name="arrow" />
				</view>
			</view>
		</view>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
import { fileById } from '@/api/common.js'
import { alList } from	'@/api/appraising.js'
	export default {
		data() {
			return {
				show: false,
				isShow: false,
				imagUrl: '',
				parame: {},
				alist: [],
				total: 0,
				pagination: {
					pageSize: 10,
					pageNum: 1
				}
			}
		},
		onLoad(data) {
			if (data !== null) {
				this.parame = JSON.parse(data.data)
				if (this.parame.countApply === this.parame.maxApply) {
					this.isShow = true
				}
				this.getTP()
				this.getAList()
			}
		},
		onReachBottom() {
		      console.log('onReachBottom')
		      if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
		        return
		      }
		      this.pagination.pageNum++;
		      this.getAList('more')
		 },
		methods:{
			setPopup() {
				this.show = true
			},
			onClose() {
				this.show = false
			},
			getTP() {
				fileById({fileId: this.parame.fileId}).then(res => {
					this.imagUrl = res.data.accessUrl
				})
			},
			getAList(str) {
				const parame = {
					meetingId: this.parame.id,
					...this.pagination
				}
				alList(parame).then(res => {
                     const arr = res.data.rows
					 this.total = res.data.total
					if (str === 'more') {
						arr.forEach(t => {
							this.alist.push(t)
						})
					} else {
						this.alist = arr
					}
				})
			},
			getAl(item) {
				uni.navigateTo({
				        url: '/packageA/pages/applyList/case?data=' + item.id,
				 });
			}
		}
	}
</script>

<style scoped lang="scss">
.contaner {
	     min-height: 100vh;
		background-color: #F8F8F8;
		overflow: auto;
		.content {
			padding: 24rpx 32rpx 0;
			.item1,.item {
				background-color: #FFFFFF;
				position: relative;
				width: 100%;
				border-radius: 16rpx;
				padding: 38rpx 16rpx;
				color: #323233;
				font-size: 32rpx;
				line-height: 44rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				.item-bottom {
					margin-top:56rpx;
					text-align: center;
					color: #666666;
					font-size: 28rpx;
					image {
						margin-bottom: 16rpx;
						width: 160rpx;
						height: 160rpx;
					}
				}
				.first-text {
					color: #666666;
					font-size: 28rpx;
				}
				.two-text {
					color: #333333;
					margin-right: 24rpx;
				}
				.appraising {
					position: absolute;
					right: 0;
					top: 0;
					width: 130rpx;
					height: 40rpx;
					background-color: #FBA517;
					line-height: 40rpx;
					text-align: center;
					border-radius: 0rpx 20rpx 0 20rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					&.besidesColor {
						background-color: #02BF88;
					}
				}
			}
			.item1 {
				padding: 24rpx 16rpx;
				z-index: 9;
				.item-h {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 16rpx;
				}
				.item-t {
					font-size: 28rpx;
					color: #666;
				}
				.rightR {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 16rpx;
				}
			}
			.alList {
				margin-bottom: 16rpx;
				display: block;
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
			}
		}
		.footer {
			position: fixed;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 132rpx;
			z-index: 99999999999;
			background-color: #FFFFFF;
		}
	}
	.contaner::-webkit-scrollbar {
     display: none; /* Chrome Safari */
}


</style>
